import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import type { RootState, RootDispatch } from '@/store'
import styles from './index.module.less'
import { useNavigate } from 'react-router-dom'

const Index = () => {
  const dispatch = useDispatch<RootDispatch>()
  const appStore = useSelector((state: RootState) => state.app)
  const navigate = useNavigate()

  const goPage = () => {
    navigate({
      pathname: '/',
    })
  }

  return (
    <div className={styles.header} style={{ padding: 24, background: '#fff' }}>
      <button onClick={goPage}>跳转主页</button>
      <div className={styles.bg} />
      <div style={{ marginTop: 20, marginBottom: 20 }}>
        <p>num参数：{appStore.num}</p>
      </div>

      <button
        onClick={() => {
          dispatch.app.deductNum({})
        }}
      >
        store num--
      </button>
    </div>
  )
}

export default Index
